﻿
@model int
@{
    var url = Request.Url.AbsolutePath;
}
@if (User.Identity.IsAuthenticated)
{
    <text>Please<a href="/Account/Login" title="Login to rate">Login</a> to rate</text>
    return;
}
@if (Request.Cookies[url] == null)
{
    <div class="ratingDiv" id="ratingId_@Model">
        <img src="/Images/emptystar.png" alt="" class="ratingStar" data-value="1" />
        <img src="/Images/emptystar.png" alt="" class="ratingStar" data-value="2" />
        <img src="/Images/emptystar.png" alt="" class="ratingStar" data-value="3" />
        <img src="/Images/emptystar.png" alt="" class="ratingStar" data-value="4" />
        <img src="/Images/emptystar.png" alt="" class="ratingStar" data-value="5" />
        <label id="lblResult_@Model"></label>
    </div>
    <style type="text/css">
        .ratingStar {
            cursor: pointer;
        }
    </style>
    <script type="text/javascript">
        var clickedFlag = false;
        $(".ratingStar").mouseover(function () {
            $(this).attr("src", "/Images/yellowstar.png").prevAll("img.ratingStar").attr("src", "/Images/yellowstar.png");
        });

        $(".ratingStar, .ratingDiv,#ratingID_@Model").mouseout(function () {
            $(this).attr("src", "/Images/emptystar.png");
        });

        $(".ratingStar").click(function () {
            clickedFlag = true;
            $("#ratingID_@Model").unbind("mouseout mouseover click").css("cursor", "default");
            var url = "/Song/AddRating?r=" + $(this).attr("data-value") + "&songID=@Model";
            $.post(url, null, function (data) {
                $(this).getElementById("#lblResult_@Model").html(data);
            });

        });
        $("#lblResult").ajaxStart(function () {
            $("#lblResult").html("Processing..");
        });
        $("#lblResult").ajaxError(function () {
            $("#lblResult").html("<br/>Error occured.");
        });
    </script>
}
else
{
    <text><span style="color:green;">Thanks for your vote!</span></text>

}